<template>
  <section class="box-tabs">
    <el-tabs ref="elTabs" :value="value" v-bind="$attrs" @change="change" @tab-click="handleClick" v-on="$listeners">
      <el-tab-pane v-for="(v,i) of tabs" :key="v.label + v.value + i" :label="v.label || i" :name="v.value || i">
        <template v-if="v.slotName"><slot :name="v.slotName">{{ v.slotName }}</slot></template>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
export default {
  name: 'MyTabs',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { type: String, default: ' ', required: true },
    tabs: { type: Array, default: () => { return [] }, required: true, validator: (val) => val instanceof Array }
  },
  data() {
    return { }
  },
  methods: {
    change(val) {
      this.$emit('change', val)
    },
    handleClick(tab, event) {
      this.$emit('tab-click', tab, event)
    }
  }
}
</script>

<style>

</style>
